<script setup lang='ts'>

import{ getUserListService } from '@/api/user'
import{ updateUserInfoService } from '@/api/user'
import type { FormInstance, FormRules } from 'element-plus'

import{ deleteUserService } from '@/api/user'

//控制用户详细，编辑，删除弹窗
const dialogVisible = ref(false)

//控制删除确认弹窗
const deleteDialogVisible = ref(false)

//控制弹窗标题
const dialogTitle = ref('')

//控制弹窗input能否输入
const inputDisabled = ref(true)

//控制最后确定按钮是否可用
const submitDisabled = ref(true)

interface RuleForm {
  nickname: string
  phoneNumber: string
  userType: string
  gender: string
  introduction: string
}

//定义模型，用于用户信息详细展示
const userInfoModel = ref({
    uid: '',
    nickname: '',
    phoneNumber: '',
    userType: '',
    createTime: '',
    updateTime: '',
    introduction: '',
    gender: '',
    id: '',
})

//设置表单校验规则
const rules = reactive<FormRules<RuleForm>>({
    nickname: [
        { required: true, message: 'Please input nickname', trigger: 'blur' },
        { min: 1, max: 8, message: 'Length should be 1 to 8', trigger: 'blur' },
    ],
    introduction: [
        { max: 50, message: '长度必须小于50', trigger: 'blur' }
    ]
})

//调用后台接口获取用户列表
const getUserList = async () => {

    let result = await getUserListService()
    console.log(result)
    tableData.value = result.data

}
getUserList();

// const handleClick = () => {
//     console.log('click')
// }

//数据拷贝
//由于多处需要用到数据拷贝，所以写一个函数
const copyData = (row) => {
    //数据拷贝
    userInfoModel.value.uid = row.uid;
    userInfoModel.value.nickname = row.nickname;
    userInfoModel.value.phoneNumber = row.phoneNumber;
    userInfoModel.value.userType = row.userType;
    userInfoModel.value.createTime = row.createTime;
    userInfoModel.value.updateTime = row.updateTime;
    userInfoModel.value.introduction = row.introduction;
    userInfoModel.value.gender = row.gender;
    userInfoModel.value.id = row.id;
}

//展示用户信息详细弹窗
const showDetailDialog = (row) => {
    dialogVisible.value = true;
    dialogTitle.value = '用户信息';
    inputDisabled.value = true;
    submitDisabled.value = true;

    //数据拷贝
    copyData(row)

}

//展示编辑用户信息弹窗
const showEditDialog = (row) => {
    
    dialogVisible.value = true;
    dialogTitle.value = '编辑信息';
    inputDisabled.value = false;
    submitDisabled.value = false;

    //数据拷贝
    copyData(row)

}

//展示删除用户信息弹窗
const showDeleteDialog = (row) => {

    dialogVisible.value = true;
    dialogTitle.value = '删除用户';
    inputDisabled.value = true;
    submitDisabled.value = false;

    //数据拷贝
    copyData(row)

}

//因为确定又分为编辑用户和删除用户，所调用的函数不同，所以写一个提交函数来做判断
const submit = () => {

    if(dialogTitle.value == '编辑信息'){
        updateUserInfo();
    }else if(dialogTitle.value == '删除用户'){
        //弹出删除确认弹窗
        deleteDialogVisible.value = true;
    }

}

//另外设置一个模型用于用户信息修改，因为有的展示出来的数据不需要传递给后台进行修改
const userInfoChangeModel = ref({
    uid: '',
    nickname: '',
    phoneNumber: '',
    userType: '',
    introduction: '',
    gender: '',
})

//调用后台接口更新用户信息
const updateUserInfo = async () => {

    //数据拷贝从userInfoModel拷贝到userInfoChangeModel
    userInfoChangeModel.value.uid = userInfoModel.value.uid;
    userInfoChangeModel.value.nickname = userInfoModel.value.nickname;
    userInfoChangeModel.value.phoneNumber = userInfoModel.value.phoneNumber;
    userInfoChangeModel.value.userType = userInfoModel.value.userType;
    userInfoChangeModel.value.introduction = userInfoModel.value.introduction;
    userInfoChangeModel.value.gender = userInfoModel.value.gender;

    let result = await updateUserInfoService(userInfoChangeModel.value)
    console.log(result)
    dialogVisible.value = false;
    getUserList();

}

//调用后台接口删除用户信息
const deleteUserInfo = async () => {

    let result = await deleteUserService(userInfoModel.value.phoneNumber)
    console.log(result)
    dialogVisible.value = false;
    deleteDialogVisible.value = false;
    getUserList();

}

const tableData = ref([
    {
        createTime: '2016-05-03',
        gender: 'Tom',
        id: 'California',
        introduction: 'Los Angeles',
        nickname: 'No. 189, Grove St, Los Angeles',
        phoneNumber:'123456789',
        uid: 'CA 90036',
        updateTime: 'Home',
        userType: 'CA 90036'
    }
])

</script>

<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="nickname" label="Nickname" width="150" />
            <el-table-column prop="phoneNumber" label="PhoneNum" width="120" />
            <el-table-column prop="id" label="Id" width="120" />
            <el-table-column prop="gender" label="Gender" width="120" />
            <el-table-column prop="userType" label="UserType" width="120" />
            <!-- <el-table-column prop="introduction" label="Introduction" width="600" /> -->
            <!-- <el-table-column prop="uid" label="UID" width="120" /> -->
            <el-table-column prop="createTime" label="CreateTime" width="120" />
            <el-table-column prop="updateTime" label="UpdateTime" width="120" />
            <el-table-column fixed="right" label="Operations" width="180">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="showDetailDialog(row)">详细</el-button>
                    <el-button link type="primary" size="small" @click="showEditDialog(row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="showDeleteDialog(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 详细，编辑，删除弹窗 -->
        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
            <el-form :model="userInfoModel" :rules="rules">
                <el-form-item label="Nickname" prop="nickname">
                    <el-input v-model="userInfoModel.nickname" placeholder="userInfoModel.nickname" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="PhoneNumber" prop="phoneNumber">
                    <el-input v-model="userInfoModel.phoneNumber" placeholder="userInfoModel.phoneNumber" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="UserType" prop="userType">
                    <el-input v-model="userInfoModel.userType" placeholder="userInfoModel.userType" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="Gender" prop="gender">
                    <el-input v-model="userInfoModel.gender" placeholder="userInfoModel.gender" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="UID" prop="uid">
                    <el-input v-model="userInfoModel.uid" placeholder="userInfoModel.uid" :disabled="inputDisabled"/>
                </el-form-item>
                <el-form-item label="Id" prop="id">
                    <el-input v-model="userInfoModel.id" placeholder="userInfoModel.id" disabled/>
                </el-form-item>
                <el-form-item label="CreateTime" prop="createTime">
                    <el-input v-model="userInfoModel.createTime" placeholder="userInfoModel.createTime" disabled/>
                </el-form-item>
                <el-form-item label="UpdateTime" prop="updateTime">
                    <el-input v-model="userInfoModel.updateTime" placeholder="userInfoModel.updateTime" disabled/>
                </el-form-item>
                <el-form-item label="Introduction" prop="introduction">
                    <el-input v-model="userInfoModel.introduction" placeholder="userInfoModel.introduction" :disabled="inputDisabled"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" 
                    @click="submit" 
                    :disabled="submitDisabled"
                    >
                    确定
                    </el-button>
                    <el-button type="primary" @click="dialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 删除操作确认弹窗 -->
        <el-dialog title="提示" v-model="deleteDialogVisible" width="30%">
            <span>确定删除该用户吗？</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="deleteUserInfo">确定</el-button>
                    <el-button type="primary" @click="deleteDialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    margin: 10px;
    padding: 10px;
}
</style>